
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="../lib/jquery.js"></script>
  <script>
    var Class = (function() {
      var _mix = function(r, s) {
        for (var p in s) {
          if (s.hasOwnProperty(p)) {
            r[p] = s[p]
          }
        }
      }
      var _extend = function() {
        //开关 用来使生成原型时,不调用真正的构成流程init
        this.initPrototype = true
        var prototype = new this()
        this.initPrototype = false
        var items = Array.prototype.slice.call(arguments) || []
        var item
        //支持混入多个属性，并且支持{}也支持 Function
        while (item = items.shift()) {
          _mix(prototype, item.prototype || item)
        }
        // 这边是返回的类，其实就是我们返回的子类
        function SubClass() {
          if (!SubClass.initPrototype && this.init)
            this.init.apply(this, arguments)//调用init真正的构造函数
        }
        // 赋值原型链，完成继承
        SubClass.prototype = prototype
        // 改变constructor引用
        SubClass.prototype.constructor = SubClass
        // 为子类也添加extend方法
        SubClass.extend = _extend
        return SubClass
      }
      //超级父类
      var Class = function() {}
      //为超级父类添加extend方法
      Class.extend = _extend
      return Class
    })()
    var TextCount = Class.extend({
      init:function(config){
        this.input = $(config.id);
        this._bind();
        this.render();
      },
      render:function() {
        var num = this._getNum();
        if ($('#J_input_count').length == 0) {
          this.input.after('<span id="J_input_count"></span>');
        };
        $('#J_input_count').html(num+'个字');
      },
      _getNum:function(){
        return this.input.val().length;
      },
      _bind:function(){
        var self = this;
        self.input.on('keyup',function(){
          self.render();
        });
      }
    })
    $(function() {
      new TextCount({
        id:"#J_input"
      });
    })
  </script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>
